<template>
  <el-card>
    <div class="table">
      <!-- 表格 -->
      <el-table v-loading="loading" :data="userList" style="width: 100%">
        <el-table-column v-for="item in userTableLabel" :key="item.prop" :label="item.label" :prop="item.prop"
          :width="item.width ? item.width : 125" />
        <el-table-column :filters="[{ text: '普通用户', value: 1 }, { text: '商户', value: 2 }]" prop="role" label="用户类型"
          :filter-method="filterTag">
          <template v-slot="scope">
            <el-tag size="small" v-if="scope.row.role === 1" type="success">普通用户</el-tag>
            <el-tag size="small" v-else-if="scope.row.role === 2" type="warning">商户</el-tag>
            <el-tag size="small" v-else type="danger">管理员</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template #default>
            <el-button type="primary" size="small">编辑</el-button>
            <el-button type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination background layout="prev, pager, next" :total="config.total" class="pager mt-4"
        @current-change="changePage" :page-size="config.size" />
    </div>
  </el-card>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref, reactive } from 'vue'

const { proxy } = getCurrentInstance();

let userList = ref([]);

let loading = ref(false)

const userTableLabel = reactive([
  {
    prop: "userId",
    label: "用户ID",
    width: 220
  },
  {
    prop: "username",
    label: "用户名",
    width: 150
  },
  {
    prop: "phoneNumber",
    label: "电话号码",
    width: 150
  },
  {
    prop: "idCardNumber",
    label: "身份证号",
    width: 210
  },
  {
    prop: "email",
    label: "邮箱",
    width: 270
  },
]);

let config = reactive({
  total: 0,  // 总的条目数
  current: 1,  // 当前页
  size: 15  // 一页的条目数
})

const getUserList = async () => {
  // 开启加载遮罩
  loading.value = true;
  // 请求
  let res = await proxy.$api.user.getUserList({
    current: config.current,
    size: config.size,
  });
  // 更新表格数据
  userList.value = res.data.userList
  config.total = parseInt(res.data.total)
  // 关闭加载遮罩
  loading.value = false;
};

const changePage = (page) => {
  // 更新当前页码
  config.current = page
  getUserList()
}

let filterTag = (value, row) => {
  return row.role === value;
}

onMounted(() => {
  getUserList();
});

</script>

<style lang="less" scoped>
.table {
  position: relative;
  // height: 520px;

  .pager {
    position: relative;
    bottom: -15px;
    justify-content: flex-end;
    margin-right: 15px;
    margin-top: 10px;
    margin-bottom: 15px;
  }
}
</style>